<template>
    <div class="headers">
        <div style="margin-top: 0px">
            <br/>
            <van-cell-group>
                <van-field label="姓名：" v-model="name" placeholder="" />
            </van-cell-group>
            <van-cell-group>
                <van-field label="身份证：" v-model="idcard" placeholder="" />
            </van-cell-group>
            <van-cell-group>
                <van-field label="公司名称：" v-model="company" placeholder="" />
            </van-cell-group>
            <van-cell-group>
                <van-field label="联系电话：" v-model="phone" type="tel" placeholder="" />
            </van-cell-group>
            <van-cell-group>
                <van-field label="联系地址：" v-model="addr" type="text" placeholder="" />
            </van-cell-group>

            <van-cell-group>
                <div class="van-cell-group van-hairline--top-bottom">
                    <div class="van-cell van-hairline van-field">
                        <div class="van-cell__title">保证金：</div>
                        <div class="van-cell__value">
                            <span style="color: #ff4c50;text-align: right">￥{{getmoney}}</span>
                        </div>
                    </div>
                </div>
            </van-cell-group>
            <div style="margin-left: 12px;">
            <span>
                <input type="checkbox"class="Checkbox" v-model="isread" id="check1">
                <label for="check1"></label>
            </span>
                <span class="agree">请仔细阅读并同意
                <router-link to="/contract">
                    <span>《纳品网加盟合作服务协议》</span>
                </router-link>
            </span>
            </div>
            <van-button class="confirm" style="border-radius: 8px" type="primary" v-on:click="confirm()" size="large">确 认</van-button>
        </div>
    </div>
</template>

<script>
    import {CellGroup,Field,Button,Checkbox,CheckboxGroup } from 'vant';
    export default {
        name: "dojoin",
        components:{
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [Button.name]: Button,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup .name]: CheckboxGroup ,
        },
        data(){
            return {
                name:"",
                phone:"",
                addr:"",
                company:"",
                idcard:"",
                getmoney:'20000.00',
                isread:false
            };
        },
        methods:{
            confirm(){
                //验证姓名
                if(!this.name){
                    this.$toast('姓名必填');
                    return false;
                }
                //验证身份证
                if(!this.idcard){
                    this.$toast('身份证必填');
                    return false;
                }
                const pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(!pattern.test(this.idcard.trim())){
                    this.$toast('身份证格式错误');
                    return false;
                }
                //验证电话
                if(!this.phone){
                    this.$toast('联系电话必填');
                    return false;
                }
                const regphone = new RegExp(/^1[0123456789]\d{9}$/);
                if (!regphone.test(this.phone.trim())){
                    this.$toast('联系电话格式错误');
                    return false;
                }
                //验证地址
                if(!this.addr){
                    this.$toast('联系地址必填');
                    return false;
                }
                //验证阅读条约
                if(!this.isread){
                    this.$toast('请勾选条约');
                    return false;
                }
                const data = {
                    "name":this.name,
                    "company":this.company,
                    "phone":this.phone,
                    "addr":this.addr,
                    "idcard":this.idcard,
                    'money':this.getmoney
                };
                //传值给安卓和ios
                if (this._globe.isAndroid) {
                    if (window.android != null && typeof window.android != "undefined") {
                        window.android.joinPay(data);//
                    }
                }else if (this._globe.isIos) {
                    if (window.webkit) {
                        window.webkit.messageHandlers.joinPay.postMessage(data);
                    }
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    [class*=van-hairline]{
        position: initial !important;
    }
    .van-hairline--top-bottom{
        position: initial !important;
    }
    .headers{
        background-color: #f8f8f8;
        height: 100%;
    }
    .agree{
        margin-top: 4px;
        margin-left: 22px;
        float: left;
        font-size: 11px;
        color: #ff4c50;
        /*text-indent: 4vw;*/
    }
    .agree span{
        color: #ff4c50;
    }
    .confirm{
        background-color: #4591E6;
        border: 1px solid #4591E6;
        height: 46px;
        width: 94%;
        margin-left: 3%;
        margin-top: 40px;
    }
    span {
        position: relative;
    }
    .Checkbox {
        position: absolute;
        visibility: hidden;
        margin-top: 5px;
    }
    .Checkbox+label {
        position:absolute;
        width: 16px;
        height: 16px;
        border: 1px solid #A6A6A6;
        border-radius: 50%;
        background-color:#DEDEDE;
        margin-top: 5px;
    }
    .Checkbox:checked+label:after {
        content: "";
        position: absolute;
        left: 2px;
        top:4px;
        width: 9px;
        height: 4px;
        border: 2px solid #424242;
        border-top-color: transparent;
        border-right-color: transparent;
        transform: rotate(-45deg);
        -ms-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -webkit-transform: rotate(-60deg);
    }
</style>